<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
        <meta charset = "UTF-8">
        <meta name = "viewport" content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
        <title>Test</title>
        <script src = "js/jquery-3.6.1.js"></script>
         <link href="css/student.css" rel="stylesheet">
         <link href="css/info.css" rel="stylesheet"> 
        <script src = "https://code.jquery.com/jquery-3.2.1.min.js"
                integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
                crossorigin = "anonymous"></script>

        <script>
            $(function () {
            	var id="${studentId}"
            	console.log("id",id);
            	if(id!=''){
            		 	 location.href = "${pageContext.request.contextPath}/ShowstuServlet?studentId="+id; 
            	}
           
            	 str='<table border="1" align="center"><tr align="center"><th colspan="8" class="grey">个人信息</th></tr><c:forEach items="${list}" var="stu"><tr><th>姓名</th><td>${stu.sname}</td><th>性别</th><td>${stu.sex}</td><th>学号</th><td colspan="2">${stu.sno}</td><td colspan="2" rowspan="4"></td></tr><tr><th>年龄</th><td>${stu.age}</td><th>最高学历</th><td>本科</td><th>身份证号</th><td colspan="2"></td></tr><tr><th>专业</th><td colspan="2">${stu.major}</td></tr></c:forEach><th colspan="8" class="computer">计算机水平</th></tr><tr class="tr2"><th colspan="6">应用能力</th><th colspan="2">等级证书</th></tr><tr class="tr3"><td colspan="6">office熟练掌握</td><td colspan="2">全国计算机等级二级</td></tr></table>';
                 $(".content-right").html(str);  
				
                //隐藏所有子标题
                $(".nav-menu").each(function () {
                    $(this).children(".nav-content").hide();
                });

                //给菜单项中的所有主标题绑定事件
                $(".nav-title").each(function () {
                    //获取点击当前标签下所有子标签
                    var navConEle = $(this).parents(".nav-menu").children(".nav-content");

                    //绑定点击事件,判断navConEle的display这个属性是否为none,时none的话时隐藏状态
                    $(this).click(function(){
                        if (navConEle.css("display") != "none") {
                            //隐藏,传参数自带动画,单位为毫秒
                            navConEle.hide(300);
                        } else {
                            //显示,传参数自带动画,单位为毫秒
                            $(".nav-menu").each(function () {
                                $(this).children(".nav-content").hide(300);
                            });
                            navConEle.show(300);
                        }
                    });
                });
                
                	 $("#1").click(function () {
                		 location.href = "${pageContext.request.contextPath}/ShowstuServlet?studentId="+"${uid}"; 
                              
                           });
                });

        </script>
    </head>
<body>
        <div class = "content">
            <!--左侧导航栏-->
            <div class = "content-left">
                <div class = "left-title">
					
                    <a href = "#"><img src="images/用户.png" style="text-align: center;"/>个人信息界面</a>
                </div>

                <!--水平线-->
                <div class = "seg"></div>

                <!--菜单栏导航-->
                <div class = "nav">
                    <!--每一个菜单栏项-->
                    <div class = "nav-menu">
                        <!--主标题-->
                        <div class = "nav-title">基本信息</div>
                        <!--子标题-->
                        <div class = "nav-content">
                            <a id="1" href = "javascript:void(0);">个人信息</a>
							<a href = "#">####</a>
                            <a href = "#">####</a>
                        </div>
                    </div>

                    <!--每一个菜单栏项-->
                    <div class = "nav-menu">
                        <!--主标题-->
                        <div class = "nav-title">####</div>
                        <!--子标题-->
                        <div class = "nav-content">
                            <a href = "#">####</a>
                            <a href = "#">####</a>
                        </div>
                    </div>

                    <!--每一个菜单栏项-->
                    <div class = "nav-menu">
                        <!--主标题-->
                        <div class = "nav-title">####</div>
                        <!--子标题-->
                        <div class = "nav-content">
                            <a href = "#">####</a>
                            <a href = "#">####</a>
                        </div>
                    </div>
                </div>

                <!--水平线-->
                <div class = "seg"></div>
            </div>

            <div class = "content-right">
             
            </div>
           
        </div>
    </body>
</html>